<template>
  <el-main>
    <div class="cc-display selectTop">
      <div class="width80p sc-display">
        <SelectedItem msg="SelectedItem" />
      </div>
    </div>

    <div class="cc-display">
      <div class="cc-display searchResult">
        <div class="width80p" style="position: relative;min-height:400px;">
          <SearchResult
            v-for="(item, index) in searchList"
            :key="index"
            :searchlist="item"
            style="width: 75%"
          />
          <div
            style="width: 75%; height: 200px"
            class="cc-display"
            v-show="searchList.length < 3"
          >
            没有更多内容了~
          </div>

          <!-- 热搜排行 -->
          <FireOrder msg="FireOrder" style="width: 22.5%" />
        </div>
      </div>
    </div>
  </el-main>
</template>

<script>
// @ is an alias to /src
import SelectedItem from "@/views/article/SelectedItem.vue";
import SearchResult from "./SearchResult.vue";
import FireOrder from "@/views/article/FireOrder.vue";

export default {
  name: "Search",
  components: {
    SelectedItem,
    SearchResult,
    FireOrder
  },
  data() {
    return {
      searchList: [{ title: "", content: "" }]
    };
  },
  computed: {
    searchGetResult() {
      /* 计算属性 searchGetResult 与 store 的 searchInputText 绑定*/
      return this.$store.state.searchInputText;
    }
  },
  watch: {
    searchGetResult: {
      /* 监听搜索 */
      immediate: true,
      handler: function(newVal, oldVal) {
        console.log(`${newVal}---${oldVal}`);
        if (newVal == oldVal) {
          // 搜索值新老输入相等，不做处理
          return;
        }
        this.axios
          .post(`nc_search/allSearch`, {
            title: newVal,
            content: newVal,
            author: newVal
          })
          .then(res => {
            console.log(res);
            if (res.data.errCode && res.data.errCode == "success") {
              this.searchList = res.data.data;
              return;
            }
            this.$message.error("搜索失败，请稍后重试！");
          })
          .catch(err => {
            console.log(err);
            this.$message.error("系统异常，请稍后重试！");
          });
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-main {
  padding: 0;
}
.selectTop {
  width: 100%;
  min-width: 1000px;
  height: 45px;
  background-color: #f6f6f6;
  margin-top: 30px;
}

.width80p {
  height: 100%;
  width: 80%;
  min-width: 1000px;
  max-width: 1200px;
}

.searchResult {
  width: 100%;
  min-width: 1000px;
  margin-top: 20px;
}
</style>
